<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>达内商城学子餐饮页</title>
    <link href="/user/css/item.food.css" rel="stylesheet"/>
    <link href="/user/css/header.css" rel="stylesheet"/>
    <link href="/user/css/footer.css" rel="stylesheet"/>
    <link href="/user/css/slide.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/commons/css/bootstrap.css">
</head>
<body>
<!--顶部导航栏--> <!--注意引入的路径-->
<div th:replace="~{user/commons/commons::header}"></div>
<!-- nav主导航-->
<div>&nbsp;</div>
<!-- banner部分-->
<div class="ck-slide">
    <ul class="ck-slide-wrapper">
        <li>
            <a href="detail.html"><img src="/user/img/banner/banner1.png" alt=""></a>
        </li>
        <li style="display:none">
            <a href="detail.html"><img src="/user/img/banner/banner2.png" alt=""></a>
        </li>
        <li style="display:none">
            <a href="detail.html"><img src="/user/img/banner/banner3.png" alt=""></a>
        </li>
        <li style="display:none">
            <a href="detail.html"><img src="/user/img/banner/banner4.png" alt=""></a>
        </li>
        <li style="display:none">
            <a href="detail.html"><img src="/user/img/banner/banner5.png" alt=""></a>
        </li>
    </ul>
    <a href="javascript:;" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:;" class="ctrl-slide ck-next">下一张</a>
    <div class="ck-slidebox">
        <div class="slideWrap">
            <ul class="dot-wrap">
                <li class="current"><em>1</em></li>
                <li><em>2</em></li>
                <li><em>3</em></li>
                <li><em>4</em></li>
                <li><em>5</em></li>
            </ul>
        </div>
    </div>
</div>
<!-- 特推部分-->
</div>
<!--商品-->
<div class="store">
    <div class="store_top">
        <img src="/user/img/banner/icon.png" alt=""/><span>热搜排行</span>
    </div>

    <div class="store_content">
        <div th:each="book : ${books}">
            <a th:href="@{'/user/page/detail/?isbn='+${book.isbn}}"><img th:src="@{'/user/img/goods/'+${book.isbn}+'/index.jpg'}" alt=""/></a>
            <p class="one" th:text="${book.title}"></p>
            <p class="two">
                <span>
                    价格：<span th:text="${book.price}"></span>
                </span>
            </p>
            <p class="three">
                <span>
                出版社：<span th:text="${book.press}"></span>
                </span>
            </p>
        </div>
    </div>
    <!--分页-->
    <nav style="text-align: center;">
        <ul class="pagination">
            <li >
                <a th:href="@{'/user/page/index/?page=1'}" aria-label="Previous">
                    <span aria-hidden="true">首页</span>
                </a>
            </li>
            <li th:if="${bookPageInfo.hasPreviousPage}">
                <a th:href="@{'/user/page/index/?page='+${bookPageInfo.pageNum - 1}}"
                   aria-label="Previous">
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>

            <li th:each="page : ${bookPageInfo.navigatepageNums}" th:class="${bookPageInfo.pageNum == page}? 'active' : ''" >

                <a th:href="@{'/user/page/index/?page='+${page}}" th:text="${page}"></a>

            </li>
            <li th:if="${bookPageInfo.hasNextPage}">
                <a th:href="@{'/user/page/index/?page='+${bookPageInfo.pageNum + 1}}"
                   aria-label="Previous">
                    <span aria-hidden="true">下一页</span>
                </a>
            </li>
            <li >
                <a th:href="@{'/user/page/index/?page='+${bookPageInfo.pages}}" aria-label="Previous">
                    <span aria-hidden="true">尾页</span>
                </a>
            </li>
            <li>
                <span aria-label="Previous">共[[${bookPageInfo.pages}]]页</span>
            </li>
            <li>


            </li>
        </ul>

    </nav>
    <!-- 页面底部-->
    <div th:replace="~{user/commons/commons::foot}"></div>

    <script src="/commons/js/axios.min.js"></script>
    <script src="/commons/js/vue.min.js"></script>
    <!--vue-->
    <script>
        new Vue({
            el: '#app',
            data: {
                keyword: '',//搜索的关键字
                results: []//搜索结果
            },
            methods: {
                searchKey(){
                    var keyword = this.keyword;
                    console.log(keyword);
                    //对接后端的接口
                    axios.get('search/'+keyword+'/1/50').then(response=>{
                        console.log(response);
                        //绑定数据
                        this.results=response.data;
                    })
                }
            }
        })
    </script>

    <script src="/commons/js/jquery.min.js"></script>
    <script src="/user/js/index.js"></script>
    <script src="/user/js/slide.js"></script>
    <script>
        $('.ck-slide').ckSlide({
            autoPlay: true,//默认为不自动播放，需要时请以此设置
            dir: 'x',//默认效果淡隐淡出，x为水平移动，y 为垂直滚动
            interval: 3000//默认间隔2000毫秒
        });
    </script>
</div>
</body>
</html>
